<template>
  <div id="MainNavContainer" v-if="visible" class="main-nav-container">
    <div class="bg" @click="close"></div>
    <div class="nav-box">
      <div class="head-box">
        <div class="title">分类</div>
        <div class="close" @click="close">
          <img src="static/image/prep/close-icon.png" alt="">
        </div>
      </div>
      <div class="list">
        <a v-for="(item,index) in navList" :href="item.url" :key="index" class="item" :class="{active: index === active}" @click="active = index">{{item.name}}</a>
      </div>
      <a class="result-btn">
        <span>快速在线咨询</span>
        <img src="static/image/prep/zan.png" alt="">
      </a>
    </div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      visible: {
        default: false,
      }
    },
    data() {
      return {
        active: 0,
        navList: [
          { name: '首页', url: './' },
          { name: '高中生', url: './16HighStudent.html' },
          { name: '大学生', url: './14Undergraduate.html' },
          { name: '艺术生', url: './17ArtStudent.html' },
          { name: '高考落榜', url: 'javascript:;' },
          { name: '学霸留学', url: 'javascript:;' },
          { name: '免学费', url: 'javascript:;' },
          { name: '热门专业', url: './studyMajor.html' },
          { name: '中外合作', url: 'javascript:;' },
          { name: '留学费用', url: './studyFee.html' },
          { name: '院校展示', url: './school.html' },
          { name: '在线评估', url: './18OnlineAssessment.html' },
          { name: '2+2', url: './04TwoPreparatory.html' },
          { name: '3+1', url: 'javascript:;' },
          { name: '3+2/2+3', url: './06ThreeTwoMaster.html' },
          { name: '1+3/4', url: './02OneThreeUndergraduate.html' },
        ],
      }
    },
    methods: {
      close() {
        this.$emit('update:visible', false)
      }
    },
    watch: {
      visible(v) {
        if (v) {
          document.documentElement.style.overflow = 'hidden'
        } else {
          document.documentElement.removeAttribute('style')
        }
      }
    }
  }
</script>

<style>
</style>